<template>
  <div class="demo">
    <div class="demo-title">输入框组合</div>
    <div class="demo-content">
      <Input.Group size="large">
        <Row :gutter="8">
          <Col :span="5">
            <Input v-model:value="value1" />
          </Col>
          <Col :span="8">
            <Input v-model:value="value2" />
          </Col>
        </Row>
      </Input.Group>
      <br />
      <Input.Group compact>
        <Input v-model:value="value1" style="width: 20%" />
        <Input v-model:value="value2" style="width: 30%" />
      </Input.Group>
      <br />
      <Input.Group compact>
        <Select v-model:value="value3">
          <Select.Option value="Zhejiang">Zhejiang</Select.Option>
          <Select.Option value="Jiangsu">Jiangsu</Select.Option>
        </Select>
        <Input v-model:value="value4" style="width: 50%" />
      </Input.Group>
      <br />
      <Input.Group compact>
        <Select v-model:value="value5">
          <Select.Option value="Option1">Option1</Select.Option>
          <Select.Option value="Option2">Option2</Select.Option>
        </Select>
        <Input v-model:value="value6" style="width: 50%" />
      </Input.Group>
      <br />
      <Input.Group compact>
        <Input v-model:value="value7" style="width: 50%" />
        <DatePicker v-model:value="value8" style="width: 50%" />
      </Input.Group>
      <br />
      <Input.Group compact>
        <Select v-model:value="value9">
          <Select.Option value="Option1-1">Option1-1</Select.Option>
          <Select.Option value="Option1-2">Option1-2</Select.Option>
        </Select>
        <Select v-model:value="value10">
          <Select.Option value="Option2-1">Option2-1</Select.Option>
          <Select.Option value="Option2-2">Option2-2</Select.Option>
        </Select>
      </Input.Group>
      <br />
      <Input.Group compact>
        <Select v-model:value="value11">
          <Select.Option value="1">Between</Select.Option>
          <Select.Option value="2">Except</Select.Option>
        </Select>
        <Input
          v-model:value="value12"
          style="width: 100px; text-align: center"
          placeholder="Minimum"
        />
        <Input
          v-model:value="value13"
          style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff"
          placeholder="~"
          disabled
        />
        <Input
          v-model:value="value14"
          style="width: 100px; text-align: center; border-left: 0"
          placeholder="Maximum"
        />
      </Input.Group>
      <br />
      <Input.Group compact>
        <Select v-model:value="value15">
          <Select.Option value="Sign Up">Sign Up</Select.Option>
          <Select.Option value="Sign In">Sign In</Select.Option>
        </Select>
        <AutoComplete
          v-model:value="value16"
          :options="[{ value: 'text 1' }, { value: 'text 2' }]"
          style="width: 200px"
          placeholder="Email"
        />
      </Input.Group>
      <br />
      <Input.Group compact>
        <Select v-model:value="value17" style="width: 30%">
          <Select.Option value="Home">Home</Select.Option>
          <Select.Option value="Company">Company</Select.Option>
        </Select>
        <Cascader
          v-model:value="value18"
          style="width: 70%"
          :options="options"
          placeholder="Select Address"
        />
      </Input.Group>
      <br />
      <Input.Group compact>
        <Input v-model:value="value19" style="width: calc(100% - 200px)" />
        <Button type="primary">Submit</Button>
      </Input.Group>
      <br />
      <Input.Group compact>
        <Input v-model:value="value20" style="width: calc(100% - 200px)" />
        <Tooltip title="copy git url">
          <Button>
            <template #icon><CopyOutlined /></template>
          </Button>
        </Tooltip>
      </Input.Group>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { CopyOutlined } from '@ant-design/icons-vue';
  import AutoComplete from '@sscd/auto-complete';
  import Button from '@sscd/button';
  import Cascader from '@sscd/cascader';
  import DatePicker from '@sscd/date-picker';
  import { Col, Row } from '@sscd/grid';
  import Select from '@sscd/select';
  import Tooltip from '@sscd/tooltip';
  import Input from '@sscd/input';
  const options = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
            },
          ],
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
            },
          ],
        },
      ],
    },
  ];
  const value1 = ref<string>('0571');
  const value2 = ref<string>('26888888');
  const value3 = ref<string>('Zhejiang');
  const value4 = ref<string>('Xihu District, Hangzhou');
  const value5 = ref<string>('Option1');
  const value6 = ref<string>('input content');
  const value7 = ref<string>('input content');
  const value8 = ref<string | null>(null);
  const value9 = ref<string>('Option1-1');
  const value10 = ref<string>('Option2-2');
  const value11 = ref<string>('1');
  const value12 = ref<string>('');
  const value13 = ref<string>('');
  const value14 = ref<string>('');
  const value15 = ref<string>('Sign Up');
  const value16 = ref<string>('');
  const value17 = ref<string>('Home');
  const value18 = ref<string[]>([]);
  const value19 = ref<string>('https://surely.cool');
  const value20 = ref<string>('https://antdv.com');
</script>

<style lang="less" scoped></style>
